<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sum – a Flyd demo</title>
    <link href='http://fonts.googleapis.com/css?family=Inconsolata|Josefin+Sans:400,300' rel='stylesheet' type='text/css'>
    <style>
    * {
      font-family: 'Josefin Sans', sans-serif;
    }
    body {
      text-align: center;
      font-size: 1.0em;
    }
    .column {
      text-align: left;
    }
    @media (min-width: 400px) {
      .column {
        display: inline-block;
        width: 21em;
        vertical-align: top;
        max-width: 100%;
      }
    }
    @media (min-width: 450px) {
      .center-column {
         width: 5em;
      }
    }
    @media (min-width: 800px) {
      .right-column {
        text-align: left;
        margin-left: .4em;
      }
      .center-column {
        text-align: center;
      }
      .left-column {
        text-align: right;
        margin-right: .4em;
      }
    }
    @media (min-width: 900px) {
      body { font-size: 1.1em; }
    }
    @media (min-width: 950px) {
      body { font-size: 1.2em; }
    }
    @media (min-width: 1050px) {
      body { font-size: 1.3em; }
    }
    @media (min-width: 1200px) {
      body { font-size: 1.4em; }
    }
    a, code {
      transition: .1s ease all;
    }
    h1 {
      font-weight: 300;
      font-size: 3.6em;
    }
    .title-container {
    }
    h1, h2, p {
      margin: 15px 0;
    }
    .title-container h1 {
      margin-top: 28px;
    }
    code {
      font-family: 'Inconsolata';
      background: #ececec;
      padding: 0 .1em;
    }
    .code-block {
      white-space: pre;
      padding: .5em;
      display: block;
      font-size: .9em;
    }
    #sumBox {
      font-weight: bold;
    }
    .a-exe a {
      cursor: pointer;
      font-family: 'Inconsolata';
      color: #6851ff;
      background: #ececec;
      padding: 0 .1em;
    }
    .a-exe {
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .a-exe a:active {
      color: yellow;
      background: black;
    }
    </style>
    <script type="text/javascript" src="build.js"></script>
  </head>
  <body>
    <div class="title-container">
      <h1>Sum</h1>
    </div>
    <div class="column left-column a-exe">
      <h2>Execute</h2>
      <p>
      Also try calling <code>x</code> and <code>y</code> in your browser console.
      </p>
      <p>
        <a onclick="x(1)">x(1)</a>
        <a onclick="x(2)">x(2)</a>
        <a onclick="x(3)">x(3)</a>
        <a onclick="x(5)">x(5)</a>
        <a onclick="x(8)">x(8)</a>
        <a onclick="x(13)">x(13)</a>
      </p>
      <p>
        <a onclick="y(1)">y(1)</a>
        <a onclick="y(2)">y(2)</a>
        <a onclick="y(3)">y(3)</a>
        <a onclick="y(5)">y(5)</a>
        <a onclick="y(8)">y(8)</a>
        <a onclick="y(13)">y(13)</a>
      </p>
      <p>
        <a onclick="x(x()+1)">x(x() + 1)</a>
        <a onclick="x(x()-1)">x(x() - 1)</a>
      </p>
      <p>
        <a onclick="y(y()+1)">y(y() + 1)</a>
        <a onclick="y(y()-1)">y(y() - 1)</a>
      </p>
    </div>
    <div class="column center-column">
      <h2>Result</h2>
      <p>
        <code>x</code> is <code id="xBox">...</code>
      </p>
      <p>
        <code>y</code> is <code id="yBox">...</code>
      </p>
      <p>
        <code>sum</code> is <code id="sumBox">...</code>
      </p>
    </div>
    <div class="column right-column">
      <h2>Source code</h2>
      <code class="code-block">var x = stream(10);
var y = stream(20);
var sum = flyd.combine(function(x, y) {
  return x() + y();
}, [x, y]);
var elm = document.getElementById('sumBox');
flyd.map(function(s) {
  elm.innerHTML = s;
}, sum);</code>
    </div>
  </body>
</html>
